<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        header a {
            text-decoration: none;
            color: #6c6c6c;
        }

        .el-table .el-table__cell {
            padding: 0;
        }

        .el-table .cell {
            white-space: nowrap; /*设置内容不换行*/
            text-overflow: ellipsis; /*有超出显示范围的文本时显示...*/
        }

        .p_img:hover {
            position: relative;
            top: 5px;
            /*设置元素阴影:x偏移值 y偏移值 浓度(值越大越模糊) 范围 颜色*/
            box-shadow: 0 0 10px 5px #333;
        }

        .layout-header {
            background: #1684b0;
        }

        .layout-header h1 {
            color: #fff;
            text-align: left;
            line-height: 60px;
        }

        .layout-body {
            position: absolute;
            top: 240px;
            bottom: 0;
            left: 28px;
            right: 0;
        }

        .layout-aside {
            background: blue;
        }

        .layout-aside i {
            color: #fff !important;
        }
        .el-dropdown {
            vertical-align: top;
        }
        .el-dropdown + .el-dropdown {
            margin-left: 15px;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }



    </style>
</head>
<body>
<div id="app">
    <!--    最外层容器-->
    <el-container>
        <!--        上半部分： 顶栏-->
        <el-header >
            <div style="width: 1200px;margin: 0 auto">
                <img src="imgs/logo.jpg" style="width: 200px;vertical-align: middle" alt="">
                <a href="index.html">首页</a>
                <el-divider direction="vertical"></el-divider>
                <a href="">热点资讯</a>
                <el-divider direction="vertical"></el-divider>
                <a href="">商家入驻</a>
                <el-divider direction="vertical"></el-divider>
                <a href="">社会招聘</a>
                <el-divider direction="vertical"></el-divider>
                <a href="">校园招聘</a>
                <el-divider direction="vertical"></el-divider>
                <a href="">帮助</a>
            </div>
            <!--导航菜单开始-->
            <div style="background-color:green;padding: 20px">
                <el-dropdown v-for = "c in categoryArr" @command="handleCommand" >
                    <el-button type="primary" style = "background:green;border-style: none">
                        {{c.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for = "c1 in c.childrens" :command="c1.id">{{c1.name}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>





<!--                <el-menu style="width: 1200px;margin: 0 auto"-->
<!--                         :default-active="activeIndex"-->
<!--                         class="el-menu-demo"-->
<!--                         mode="horizontal"-->
<!--                         @select="handleSelect"-->
<!--                         background-color="green"-->
<!--                         text-color="#fff"-->
<!--                         active-text-color="#fff">-->
<!--                    <el-menu-item index="c.id">啥也不是啊</el-menu-item>-->

                    <div style="float: right;position: relative;top: 10px">
                        <el-input placeholder="请输入搜索内容" v-model="wd">
                            <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
                        </el-input>
                    </div>
                </el-menu>
            </div>
            <!--导航菜单结束-->
        </el-header>


        <el-container class="layout-body">
<!--            <el-aside class="layout-aside">-->
<!--                <el-menu-->
<!--                        router-->
<!--                        :default-active="1"-->
<!--                        class="el-menu-vertical-demo"-->
<!--                        background-color="rgb(255,0,0)"-->
<!--                        text-color="#fff"-->
<!--                        active-text-color="#fff">-->
<!--                    &lt;!&ndash; 首页 &ndash;&gt;-->
<!--                    <el-menu-item index="/sys-admin">-->
<!--                        <i class="el-icon-s-home"></i>-->
<!--                        <span>大桃子</span>-->
<!--                    </el-menu-item>-->
<!--                    &lt;!&ndash; 临时页面 &ndash;&gt;-->
<!--                    <el-submenu index="2">-->
<!--                        <template slot="title">-->
<!--                            <i class="el-icon-s-tools"></i>-->
<!--                            <span>大梨子</span>-->
<!--                        </template>-->
<!--                        <el-menu-item index="/sys-admin/temp/admin/add-new">-->
<!--                            <i class="el-icon-circle-plus"></i>-->
<!--                            <span>添加管理员</span>-->
<!--                        </el-menu-item>-->
<!--                    </el-submenu>-->

<!--                </el-menu>-->
<!--            </el-aside>-->


            <el-main style="width: 1200px;margin: 0 auto">

                <!--商品列表开始-->
                <el-row gutter="24">
                    <el-col style="margin: 10px 0" span="6" v-for="p in productArr">
                        <el-card style="height: 300px">
                            <a :href="'/productInfo.html?id='+p.id">
                                <img class="p_img" :src="p.url" width="100%" height="190px" alt="">
                            </a>
                            <div>
                                <p style="font-size: 15px;height: 40px;margin-top: 0">
                                    <a style="text-decoration: none;color: #3f3f3f"
                                       :href="'/productInfo.html?id='+p.id">
                                        {{p.name}}
                                    </a>
                                </p>
                                <p style="font-size: 12px;color: #666">
                                    ￥{{p.price}} 浏览量:{{p.viewCount}}
                                    <span style="float: right">销量:{{p.saleCount}}件</span>
                                </p>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <!--商品列表结束-->
                <el-pagination
                        style="position: absolute;right: 0;bottom: 0;margin-bottom: 30px;margin-right: 30px"
                        background
                        layout="prev, pager, next"
                        :total="100"
                        :current-page="obj.currentPage"
                        @current-change="handleCurrentChange">
                </el-pagination>

            </el-main>

        </el-container>
    </el-container>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                categoryArr: [],
                activeIndex: "1",
                wd: "",
                obj: {currentPage: "1"},
                productArr: [],
                currentCid: ""

            }
        },
        methods: {
            handleCurrentChange(val) {
                v.obj.currentPage = val;
                console.log(val);
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .get("/item?cid=" + v.currentCid + "&page=" + val)
                    .then(function (response) {
                        v.productArr = response.data.data;
                    })

            },
            handleClick() {
                alert('button click');
            },

            handleCommand(command){
                console.log("参数为:"+command)
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .get("/item?cid=" + command + "&page=1")
                    .then(function (response) {
                        v.productArr = response.data.data;

                        //v.handleCurrentChange(1);
                    })
            },


            /*handleSelect(key, keyPath) {

                console.log(key, keyPath);
                v.currentCid = key;
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .get("/item?cid=" + key + "&page=1")
                    .then(function (response) {
                        v.productArr = response.data.data;
                        v.handleCurrentChange(1);
                    })
            },*/
            search() {
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .get("/item/selectByWd?name=" + v.wd).then(function (response) {
                    v.productArr = response.data.data;

                })
            }
        },
        created: function () {
            // axios.get("/itemCategory").then(function (response) {
            //     let responseBody = response.data;
            //     v.categoryArr = responseBody.data;
            // })
            //判断地址栏中是否包含wd
            /*if (location.search.indexOf("wd") != -1) {//包含wd代表显示搜索结果
                //根据地址栏中的wd搜索内容发出请求获取所有相关商品
                axios.get("/product/selectByWd" + location.search)
                    .then(function (response) {
                        v.productArr = response.data;
                    })
                //不包含
            } else {
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .get("/item" + location.search + "&page=1")
                    .then(function (response) {
                        console.log(location.search)
                        v.productArr = response.data.data;
                        let cid = location.search.split('=')[1];
                        v.activeIndex = cid;
                    })
            }*/
            axios
                .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                .get("/itemCategory/all")
                .then(function (response) {
                    console.log(response.data.data);
                    v.categoryArr = response.data.data.categories;
                }),
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .get("/item/list")
                    .then(function (response) {
                        console.log(response.data.data);
                        v.productArr = response.data.data;
                    })
        }

    })

</script>
</html>
